<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .ipt {
            width: 200px;
            height: 30px;
            border: 1px solid blue;
        }
    </style>

    <body>
        <div id="app">
            <input type="text" value="请输入内容进行查找" class="ipt">
            <div class="container" v-if="list.length > 0">
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>资产名称</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item ,i) in list" :key="item.id">
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.price}}</td>
                            <td @click="shanchu(i)"><a href="#">删除</a></td>
                        </tr>

                    </tbody>

                </table>
                <div>总价：{{zongjia}}</div>
            </div>
            <div v-else>没有东西了快去买把·····</div>
            <input type="text">
            <input type="text" name="" id="">
            <button>添加</button>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    list: [
                        { id: 1, name: '外套', price: 99 },
                        { id: 2, name: '裤子', price: 34 },
                        { id: 3, name: '鞋', price: 25.4 },
                        { id: 4, name: '头发', price: 19900 }
                    ]
                },
                methods: {
                    shanchu(i) {
                        if (!window.confirm('确定要删除吗')) {
                            return
                        }
                        this.list.splice(i, 1)
                    }
                },
                computed: {
                    zongjia() {
                        let num = 0;
                        this.list.forEach(i => {
                            num += i.price
                        });
                        return num.toFixed(2)
                    }
                }
            });
        </script>
    </body>

</html>